<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>ECharts 柱状图示例</title>
        <!-- 引入 ECharts 文件 -->
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    </head>
    <body>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 800px; height: 400px"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main"));

            // 指定图表的配置项和数据
            var option = {
                xAxis: {
                    type: "category",
                    data: [
                        "推荐",
                        "分享",
                        "主页",
                        "关注",
                        "朋友",
                        "其他",
                        "消息",
                    ],
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    type: "value",
                    max: 1200,
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                        },
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        data: [1051, 34, 31, 23, 23, 23, 6],
                        type: "bar",
                        barWidth: "40%",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgb(0, 153, 127)" }, // 上面深色
                                    {
                                        offset: 1,
                                        color: "rgba(0, 153, 127, 0.3)",
                                    }, // 下面浅色
                                ]
                            ),
                        },
                        label: {
                            show: true,
                            position: "top",
                            color: "#666",
                        },
                    },
                ],
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    top: "10%",
                    containLabel: true,
                },
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
</html>
